<template>
  <!--问卷和报告填写-->
  <div id="questionAndReport">
    <div class="aaa" v-for="(item,index) in jsonData" :key="index">
      <div class="titleWarp">
        <presentationtitle :state="false" :titleVal="index + 1 + '.' + item.question" />
      </div>
      <div class="boxBorderX"></div>
      <div class="box" v-for="(needitem,needindex) in item.child" :key="needindex">
        <div class="contWarp" v-if="needitem.question_type===1">
          <subject
            :type="1"
            :needindex="needindex"
            selectState="0"
            title="评价题"
            :selectVal="needitem.selectItem"
            :titleInfo="needitem.question"
            @typeClick="typeClick"
          />
        </div>
        <div class="contWarp" v-if="needitem.question_type===2">
          <subject
            :type="2"
            :needindex="needindex"
            selectState="0"
            title="单选题"
            :selectVal="needitem.selectItem"
            :titleInfo="needitem.question"
            @typeClick="typeClick"
          />
        </div>
        <div class="contWarp" v-if="needitem.question_type===3">
          <subject
            :type="3"
            :needindex="needindex"
            selectState="0"
            title="多选题"
            :selectVal="needitem.selectItem"
            :titleInfo="needitem.question"
            @typeClick="typeClick"
          />
        </div>
        <div class="contWarp" v-if="needitem.question_type===4">
          <div class="questionMainlist">
            <presentationtitle titleVal="图片上传" :infoVal="needitem.question" />
          </div>
        </div>
        <div class="contWarp" v-if="needitem.question_type===5">
          <div class="questionMainlist">
            <presentationtitle titleVal="视频上传" :infoVal="needitem.question" />
          </div>
        </div>
        <div class="contWarp" v-if="needitem.question_type===6">
          <div class="questionMainlist">
            <presentationtitle titleVal="打分题" :infoVal="needitem.question" />
          </div>
        </div>
        <div class="contWarp" v-if="needitem.question_type===7">
          <div class="questionMainlist">
            <presentationtitle titleVal="描述题" :infoVal="needitem.question" />
          </div>
        </div>
        <div class="contWarp" v-if="needitem.question_type===8">
          <div class="questionMainlist">
            <presentationtitle titleVal="小票题" :infoVal="needitem.question" />
          </div>
        </div>
      </div>
      <div class="boxBorder"></div>
    </div>
    <div style="height:40rpx"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      needindex: 0,
      optionsVal: {},
      jsonData: [],
      optionPost: []
    };
  },
  methods: {
    typeClick(res) {
      const { needindex, index, type } = res.target;
      this.jsonData[0].child[needindex].selectItem.map((item, idx) => {
        if (idx == index) {
          this.jsonData[0].child[needindex].selectItem[idx].option_answer = 1;
        } else {
          this.jsonData[0].child[needindex].selectItem[idx].option_answer = 0;
        }
      });
      //已经把选择过的选项进行标示 option_answer==1
    },
    retutnArr() {
      //返回 单选 多选 评分 数组。
      return new Promise((resolve, reject) => {
        let newarr = this.jsonData[0].child; //将jsonData下的每个小题拼起来 数组拼接

        let arroption = newarr.map((item, index) => {
          //循环所有题目 把单选 多选 评分题的选项筛选出来
          if (
            item.question_type === 1 ||
            item.question_type === 2 ||
            item.question_type === 3
          ) {
            return item.selectItem;
          }
        });
        let concatarr = arroption.reduce(function(a, b) {
          return a.concat(b);
        });
        let arrReturn = [];
        concatarr.map((item, index) => {
          if (item) {
            arrReturn.push({
              option_id: item.id,
              option_answer: item.option_answer == 1 ? 1 : 0,
              score: 0
            });
          }
        });
        resolve(arrReturn);
      });
    },
    postQuestionnaire() {
      this.retutnArr().then(res => {
        this.$http
          .post({
            url: "/mobile/api/subquestionnaire",
            data: {
              customer_id: wx.getStorageSync("userInfo").customer_id,
              id: this.optionsVal.receive_id,
              // consume:"",//多余的 注销
              // consume_num:"",//多余的 注销
              // food_num:"",//多余的 注销
              report_level: "",
              report_score: "",
              items: res
            }
          })
          .then(res => {
            if (res.code == "RX0000") {
              wx.navigateBack({
                delta: 2
              });
            } else {
              wx.showToast({
                icon: "none",
                title: res.data
              });
            }
          });
      });
    },
    base64Fn(url) {
      return new Promise((resolve, reject) => {
        wx.request({
          url: url,
          responseType: "arraybuffer", //最关键的参数，设置返回的数据格式为arraybuffer
          success: res => {
            //把arraybuffer转成base64
            let base64 = wx.arrayBufferToBase64(res.data);
            //不加上这串字符，在页面无法显示的哦
            base64 = "data:image/jpeg;base64," + base64;
            //打印出base64字符串，可复制到网页校验一下是否是你选择的原图片呢
            resolve(base64);
          }
        });
      });
    },
    getNewData(jsondata) {
      this.returnLevel_bag(jsondata).then(res => {
        //返回大题加 大题下的 小题 注：不包括小题的选项
        this.jsonData = res;
      });
    },
    getQuestionnaire() {
      this.$http
        .post({
          url: "/mobile/api/questionnaire",
          data: {
            id: this.optionsVal.id,
            type: "1"
          }
        })
        .then(res => {
          if (res.code == "RX0000") {
            this.getNewData(res.data);
          } else {
            wx.showToast({
              icon: "none",
              title: res.data
            });
          }
        });
    },
    returnLevel_bag(jsondata) {
      //返回大题加 大题下的 小题 注：不包括小题的选项
      return new Promise(function(reslove, reject) {
        let needArry = []; //大题
        let subArry = []; //小题
        jsondata.questions.map((item, index) => {
          if (item.level === 1) {
            item.child = []; //存放子题目
            needArry.push(item);
          } else {
            item.selectItem = []; //如果当前小题有选项 selectItem==存放选项
            item.inputVal = ""; //当前小题答案
            subArry.push(item);
          }
        });
        // 将选项 筛 到小问题下
        jsondata.option.map((item, index) => {
          let subindex = subArry.findIndex((nt, ni) => {
            return nt.id === item.questions_id;
          });
          subArry[subindex].selectItem.push(item);
        });
        //将小问题 筛 到对应的大问题下
        subArry.map((item, index) => {
          let subindex = needArry.findIndex((nt, ni) => {
            return nt.id === item.pid;
          });
          needArry[subindex].child.push(item);
        });
        reslove(needArry);
      });
    }
  },
  onShow() {
    this.getQuestionnaire();
  },
  onLoad(options) {
    this.optionsVal = options;
  }
};
</script>

<style lang='less'>
.questionMainlist {
  width: 655rpx;
  margin-top: 10px;
  margin: auto;
  padding: 20px;
  background: rgb(242, 244, 249);
}
.mainWarp {
  background: rgb(242, 244, 249) !important;
  width: 100% !important;
  overflow: hidden !important;
}
// .mainType_2 .viewlist,
// .mainType_1 .viewlist,
// .mainType_3 .viewlist {
//   float: left !important;
//   width: 25% !important;
// }
.mainType_2 .viewlist view,
.mainType_1 .viewlist view,
.mainType_3 .viewlist view {
  // margin-left: 0px !important;
  background: #fff !important;
}
.boxBorder {
  height: 20px;
  background: #f9f9f9;
}
.boxBorderX {
  height: 10px;
  background: #f9f9f9;
}
// .box .contWarp {
//   margin-top: 2px;
// }
#questionAndReport {
  background: #fff;
  overflow: hidden;
  .titleWarp {
    width: 100%;
    margin: auto 8px;
    background: #ffffff;
    padding: 14px 22px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    font-size: 15px;
    font-family: PingFangSC-Semibold, PingFang SC;
    box-sizing: border-box;
  }
  .aaa {
    .box {
      .contWarp {
        margin-top: 2px;
      }
      &:nth-of-type(3) {
        .contWarp {
          margin-top: 0px;
        }
      }
    }
  }
  .footerContWarp {
    background: #ffffff;
    padding: 21px 0 6px 0;
    .footerBtn {
      font-size: 12px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      width: 220px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      .fttoerBtn,
      .fttoerBtn_color {
        width: 89px;
        height: 27px;
        text-align: center;
        line-height: 27px;
        border-radius: 13px;
      }
      .fttoerBtn {
        background: rgba(204, 204, 204, 1);
      }
      .fttoerBtn_color {
        background-image: linear-gradient(to right, #126ff4, #0c3ff4);
      }
    }
    .menuNum {
      text-align: center;
      color: rgb(0, 0, 0);
      font-size: 12px;
      padding: 18px 0 0 0;
    }
  }
}
</style>
